import 'package:flutter/material.dart';

class StepperPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  StepperPage({Key key, this.arguments}) : super(key: key);

  @override
  _StepperPageState createState() => _StepperPageState();
}

class _StepperPageState extends State<StepperPage> {
  List<Story> _stories;
  int _currentStep = 0;

  @override
  void initState() {
    super.initState();

    int i = 0;
    this._stories = storyMaps.map((map) {
      Story s = Story.fromMap(map);
      s.currentStep = i++;
      return s;
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StepperPage'),
      ),
      // body: LayoutBuilder(
      //   builder: (BuildContext context, BoxConstraints constraints) {
      //     print(constraints.maxWidth);
      //     return Container(
      //       color: Colors.red,
      //       height: 20.0,
      //       width: 20.0,
      //     );
      //   },
      // )
      body: Stepper(
        // physics: ClampingScrollPhysics(),
        // type: StepperType.horizontal,
        currentStep: this._currentStep,
        onStepTapped: (index) {
          setState(() {
            this._currentStep = index;
          });
        },
        onStepContinue: () {
          print('onStepContinue');
          setState(() {
            if (this._currentStep == this._stories.length - 1) {
              this._currentStep = 0;
            } else {
              this._currentStep++;
            }
          });
        },
        onStepCancel: () {
          setState(() {
            if (this._currentStep == 0) {
              this._currentStep = this._stories.length - 1;
            } else {
              this._currentStep--;
            }
          });
          print('onStepContinue');
        },
        steps: this._stories.map((m) {
          return Step(
            // TODO: title subtitle 换行问题
            title: Text(m.hint),
            // subtitle: Text(m.hint),
            content: Text(m.url),
            isActive: this._currentStep == m.currentStep,
          );
        }).toList(),
      ),
    );
  }
}

class Story {
  final String title;
  final String hint;
  final String url;

  int currentStep;

  Story.fromMap(Map<String, dynamic> map)
      : this.title = map['title'],
        this.hint = map['hint'],
        this.url = map['url'];
}

List<Map<String, dynamic>> storyMaps = [
  {
    "image_hue": "0x272d39",
    "title": "如何看待无症状感染者不需要对外公布？如何看待无症状感染者不需要对外公布？如何看待无症状感染者不需要对外公布？如何看待无症状感染者不需要对外公布？",
    "url": "https://daily.zhihu.com/story/9722068",
    "hint": "方可 · 7 分钟阅读",
    "ga_prefix": "032711",
    "images": ["https://pic4.zhimg.com/v2-94aa9ba0a0c5b1d7ef6790477549ca2b.jpg"],
    "type": 0,
    "id": 9722068
  },
  {
    "image_hue": "0x20232e",
    "title": "应不应该让孩子通过做家务来赚取零花钱？",
    "url": "https://daily.zhihu.com/story/9722067",
    "hint": "Cecilia · 1 分钟阅读",
    "ga_prefix": "032709",
    "images": ["https://pic4.zhimg.com/v2-dd9a61793796087f2d41849dbc89d8bf.jpg"],
    "type": 0,
    "id": 9722067
  },
  {
    "image_hue": "0x7daab3",
    "title": "把所有汽车的中控都改成 iPad 可行吗？",
    "url": "https://daily.zhihu.com/story/9722066",
    "hint": "汽车产品汪 · 3 分钟阅读",
    "ga_prefix": "032707",
    "images": ["https://pic1.zhimg.com/v2-feb8fc18c42d0f13a93e17a532043018.jpg"],
    "type": 0,
    "id": 9722066
  },
  {
    "image_hue": "0x864909",
    "title": "瞎扯 · 如何正确地吐槽",
    "url": "https://daily.zhihu.com/story/9722062",
    "hint": "VOL.2362",
    "ga_prefix": "032706",
    "images": ["https://pic4.zhimg.com/v2-883b3e0089a243331021be4e5e549cf7.jpg"],
    "type": 0,
    "id": 9722062
  },
  {
    "image_hue": "0xb3947d",
    "hint": "作者 / 牛顿顿顿",
    "url": "https://daily.zhihu.com/story/9721278",
    "image": "https://pic2.zhimg.com/v2-cf632722ef85178785609849e8e2bf61.jpg",
    "title": "如何看待网上五花八门的「寻人服务」？",
    "ga_prefix": "030811",
    "type": 0,
    "id": 9721278
  },
  {
    "image_hue": "0x3b4954",
    "hint": "作者 / 老伏",
    "url": "https://daily.zhihu.com/story/9721187",
    "image": "https://pic2.zhimg.com/v2-1bc6922cc3da00da1326fd15c7b9fc7d.jpg",
    "title": "假如你洗澡时，元素周期表里的元素挨个飞来会怎样？（一）",
    "ga_prefix": "030507",
    "type": 0,
    "id": 9721187
  },
  {
    "image_hue": "0x8f8864",
    "hint": "作者 / 一丁",
    "url": "https://daily.zhihu.com/story/9721127",
    "image": "https://pic4.zhimg.com/v2-b35cc03ed77a6f3bd4892722556b11e7.jpg",
    "title": "如何看待同人作品的法律风险？",
    "ga_prefix": "030409",
    "type": 0,
    "id": 9721127
  },
  {
    "image_hue": "0xb3947d",
    "hint": "作者 / 我是一只小萌刀",
    "url": "https://daily.zhihu.com/story/9720746",
    "image": "https://pic3.zhimg.com/v2-a2e68715865ee4717110c684ff34072e.jpg",
    "title": "历史上有哪些英雄人物在晚年对自己一生的评价？",
    "ga_prefix": "022411",
    "type": 0,
    "id": 9720746
  },
  {
    "image_hue": "0x051e27",
    "hint": "作者 / 羽则",
    "url": "https://daily.zhihu.com/story/9720668",
    "image": "https://pic2.zhimg.com/v2-162fbbfbf55aba80dc8a50c7f989d67d.jpg",
    "title": "你见过最野的黑客什么样？",
    "ga_prefix": "022209",
    "type": 0,
    "id": 9720668
  }
];
